 /*
 * @description: 计划详情（查看/编辑/创建）
 * @Author: along
 * @Date: 2021-07-08
 * @Last Modified by:
 * @Last Modified time: 2021-07-08
 */
<template>
    <div class="container platformControl">
        <div class="__nav">
            <p class="__nav_title">
                {{ TYPE == 'check' ? '查看计划' : TYPE == 'creat' ? '创建计划' : '编辑计划' }}
            </p>
            <p
                class="__nav_back"
                @click="() => {
                    this.$router.push({
                        name: 'platformControl'
                    })
                }"
            >
                返回
            </p>
        </div>

        <!-- table -->
        <div class="__wrap">
            <div class="__box">
                <p class="__title">基本信息</p>
                <el-form
                    :model="ruleForm"
                    ref="ruleForm"
                    :label-position="'top'"
                    label-width="150px"
                    class="el_form"
                >
                    <div class="el_row">
                        <el-form-item
                            label="计划名称"
                            prop="title"
                            :style="{
                                width: '704px',
                                marginRight: '32px'
                            }"
                            class="require"
                        >
                            <el-input
                                size="medium"
                                v-model="ruleForm.title"
                                maxlength="20"
                                show-word-limit
                                placeholder="请输入计划名称"
                                :disabled="isEdit"
                            />
                        </el-form-item>
                        <el-form-item
                            label="计划预算总额"
                            prop="money"
                            :style="{ width: '332px' }"
                            class="require"
                        >
                            <div class="el_input">
                                <el-input
                                    size="medium"
                                    v-model="ruleForm.money"
                                    placeholder="请输入预算总额"
                                    :disabled="isEdit"
                                />
                                <p class="el_text">元</p>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="el_row">
                        <el-form-item
                            label="平台补贴预算计划时间"
                            prop="platform_date"
                            :style="{ width: '704px' }"
                            class="require"
                        >
                            <div class="el_row">
                                <el-date-picker
                                    v-model="ruleForm.start_time"
                                    type="datetime"
                                    placeholder="请选择开始日期"
                                    size="medium"
                                    :style="{width: '48%'}"
                                    :disabled="isEdit"
                                />
                                <p
                                    :style="{
                                        color: 'rgba(153, 153, 153, 1)',
                                        margin: '0 12px'
                                }">
                                    -
                                </p>
                                <el-date-picker
                                    v-model="ruleForm.end_time"
                                    type="datetime"
                                    placeholder="请选择结束日期"
                                    size="medium"
                                    :style="{width: '48%'}"
                                    :disabled="isEdit"
                                    default-time="23:59:59"
                                />
                            </div>
                        </el-form-item>
                    </div>

                    <!-- 子计划开始 -->
                    <div class="__children_title">
                        子计划
                    </div>
                    <div class="__children_select">
                        <el-checkbox
                            v-model="ruleForm.platform_checked"
                            :disabled="isEdit"
                            :style="{marginBottom: !ruleForm.platform_checked ? '52px' : '0px'}"
                        >
                            创建子计划
                        </el-checkbox>

                        <!-- 子计划展示 -->
                        <template v-if="ruleForm.platform_checked">
                            <div
                                v-for="(row,index) in ruleForm.sub"
                                :key="index"
                                class="__items"
                            >
                                <div class="__items_title">
                                    <p class="__items_title_l">子计划{{ index + 1 }}</p>
                                    <p
                                        v-if="ruleForm.sub.length > 1"
                                        class="__items_title_r"
                                        @click="handleDeletePlan(ruleForm, index)"
                                        :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                                    >删除</p>
                                </div>
                                <!-- 子计划相关字段 -->
                                <div class="__items_wrap">
                                    <el-form-item
                                        label="子计划名称"
                                        :style="{ width: '704px' }"
                                        class="require"
                                    >
                                        <el-input
                                            size="medium"
                                            v-model="row.title"
                                            placeholder="请输入计划名称"
                                            maxlength="20"
                                            show-word-limit
                                            :disabled="isEdit"
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        label="平台补贴预算计划时间"
                                        prop="platform_date"
                                        :style="{ width: '704px' }"
                                        class="require"
                                    >
                                        <div class="el_row">
                                            <el-date-picker
                                                v-model="row.start_time"
                                                type="datetime"
                                                placeholder="请选择开始日期"
                                                size="medium"
                                                :style="{width: '48%'}"
                                                @change="handleChangeTime(row, 'start_time')"
                                                :disabled="isEdit"
                                            />
                                            <p
                                                :style="{
                                                    color: 'rgba(153, 153, 153, 1)',
                                                    margin: '0 12px'
                                            }">
                                                -
                                            </p>
                                            <el-date-picker
                                                v-model="row.end_time"
                                                type="datetime"
                                                placeholder="请选择结束日期"
                                                size="medium"
                                                :style="{width: '48%'}"
                                                @change="handleChangeTime(row, 'end_time')"
                                                :disabled="isEdit"
                                                default-time="23:59:59"
                                            />
                                        </div>
                                    </el-form-item>
                                    <div class="el_row">
                                        <el-form-item
                                            label="子计划金额"
                                            :style="{ width: '336px' }"
                                            class="require"
                                        >
                                            <el-input
                                                size="medium"
                                                v-model="row.money"
                                                placeholder="请输入子计划金额"
                                                :disabled="isEdit"
                                                :style="{width: '336px'}"
                                            />
                                        </el-form-item>
                                        <template v-if="TYPE == 'check'">
                                            <div class="__flex_main">
                                                <div class="__flex_wrap">
                                                    <p class="__flex_name">已被占用预算金额:</p>
                                                    <p class="__flex_money">{{ row.freeze_money }}</p>
                                                </div>
                                                <div class="__flex_wrap">
                                                    <p class="__flex_name">实际消耗金额:</p>
                                                    <p
                                                        class="__flex_money"
                                                        :style="{color: 'rgba(249, 91, 86, 1)'}"
                                                    >
                                                        {{ row.used_money }}
                                                    </p>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <p
                                        v-if="!!row.sub_detail.length"
                                        class="__items_wrap_title"
                                    >活动类型</p>
                                </div>
                                <!-- 活动类型 -->
                                <template v-if="!!row.sub_detail.length">
                                    <div
                                        v-for="(el,key) in row.sub_detail"
                                        :key="key"
                                        class="__active"
                                    >
                                        <div class="__active_header">
                                            <p class="__active_index">活动类型{{ key + 1 }}</p>
                                            <p
                                                class="__active_delete"
                                                @click="handleDeleteActive(row, key)"
                                                :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                                            >删除</p>
                                        </div>
                                        <div class="__active_box">
                                            <p class="__active_name require">选择活动类型</p>
                                            <div class="__active_radius">
                                                <el-radio
                                                    v-model="el.type"
                                                    :label="1"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(1, el, row.sub_detail)"
                                                >
                                                    平台优惠券
                                                </el-radio>
                                                <el-radio
                                                    v-model="el.type"
                                                    :label="2"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(2, el, row.sub_detail)"
                                                >
                                                    平台红包
                                                </el-radio>
                                                <el-radio
                                                    v-model="el.type"
                                                    :label="3"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(3, el, row.sub_detail)"
                                                >
                                                    一卡通折扣商品
                                                </el-radio>
                                                <el-radio
                                                    v-model="el.type"
                                                    :label="4"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(4, el, row.sub_detail)"
                                                >
                                                    一卡通1分钱商品
                                                </el-radio>
                                                <el-radio
                                                    v-model="el.type"
                                                    :label="5"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(5, el, row.sub_detail)"
                                                >
                                                    新人专区
                                                </el-radio>
                                                <el-radio
                                                    v-model="el.type"
                                                    :label="6"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(6, el, row.sub_detail)"
                                                >
                                                    社群专享价活动
                                                </el-radio>
                                                <!-- <el-radio
                                                    v-model="el.type"
                                                    :label="7"
                                                    :disabled="isEdit"
                                                    @change="handleCheckType(7, el, row.sub_detail)"
                                                >
                                                    新用户立减
                                                </el-radio> -->
                                            </div>
                                            <div class="__flex">
                                                <el-form-item
                                                    label="活动类型预算金额"
                                                    :style="{ width: '332px' }"
                                                    class="require"
                                                >
                                                    <div class="el_input">
                                                        <el-input
                                                            size="medium"
                                                            v-model="el.money"
                                                            placeholder="请输入预算总额"
                                                            :disabled="isEdit"
                                                        />
                                                        <p class="el_text">元</p>
                                                    </div>
                                                </el-form-item>
                                                <template v-if="TYPE == 'check'">
                                                    <div class="__flex_wrap">
                                                        <p class="__flex_name">已被占用预算金额:</p>
                                                        <p class="__flex_money">{{ el.freeze_money }}</p>
                                                    </div>
                                                    <div class="__flex_wrap">
                                                        <p class="__flex_name">实际消耗金额:</p>
                                                        <p
                                                            class="__flex_money"
                                                            :style="{color: 'rgba(249, 91, 86, 1)'}"
                                                        >
                                                            {{ el.used_money }}
                                                        </p>
                                                    </div>
                                                </template>
                                            </div>
                                            <el-checkbox
                                                v-model="el.checked"
                                                :disabled="[3,4,5,6,7].includes(el.type) || isEdit"
                                                :style="{marginBottom: '24px'}"
                                            >
                                                将预算细分到岗位
                                            </el-checkbox>
                                            <!-- 岗位预算开始 -->
                                            <template v-if="el.checked">
                                                <div
                                                    v-for="(option,idx) in el.sub_detail_position"
                                                    :key="idx"
                                                    class="__list"
                                                >
                                                    <div class="__list_side">
                                                        <el-form-item
                                                            :label="'岗位' + (idx + 1)"
                                                            :style="{ width: '332px', marginRight: '32px' }"
                                                            class="require"
                                                        >
                                                            <el-select
                                                                v-model="option.phaadmin_position_no"
                                                                placeholder="请选择预算岗位"
                                                                size="medium"
                                                                :style="{width: '332px'}"
                                                                :disabled="isEdit || option.is_enabled == -1"
                                                                @change="getSelectNo(el.sub_detail_position, option.phaadmin_position_no, option)"
                                                            >
                                                                <el-option
                                                                    v-for="item in postList"
                                                                    :key="item.position_no"
                                                                    :label="item.position_name"
                                                                    :value="item.position_no"
                                                                />
                                                            </el-select>
                                                        </el-form-item>
                                                        <el-form-item
                                                            :label="'岗位' + (idx + 1) + '预算金额'"
                                                            :style="{ width: '332px', marginRight: '32px' }"
                                                            class="require"
                                                        >
                                                            <el-input
                                                                size="medium"
                                                                v-model="option.money"
                                                                placeholder="请选输入预算金额"
                                                                :disabled="isEdit || option.is_enabled == -1"
                                                            />
                                                        </el-form-item>
                                                        <p
                                                            v-if="[0, 1].includes(option.is_enabled)"
                                                            class="__delete_list"
                                                            @click="handleDelete(el,idx)"
                                                            :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                                                        >
                                                            删除岗位预算
                                                        </p>
                                                    </div>
                                                    <!-- 岗位移除展示 -->
                                                    <p
                                                        v-if="[-1].includes(option.is_enabled)"
                                                        class="__list_tips"
                                                    >
                                                        (岗位已移除)
                                                    </p>
                                                    <template v-if="[-1].includes(option.is_enabled)">
                                                        <div class="__next">
                                                            <div class="__next_items">
                                                                <p class="__next_name">已被占用预算金额：</p>
                                                                <p class="__next_money">{{ option.freeze_money }}</p>
                                                            </div>
                                                            <div class="__next_items">
                                                                <p class="__next_name">实际消耗金额：</p>
                                                                <p
                                                                    class="__next_money"
                                                                    :style="{color: 'rgba(249, 91, 86, 1)'}"
                                                                >
                                                                    {{ option.used_money }}
                                                                </p>
                                                            </div>
                                                            <div class="__next_items">
                                                                <p class="__next_name">剩余预算金额：</p>
                                                                <p
                                                                    class="__next_money"
                                                                    :style="{color: 'rgba(47, 189, 179, 1)'}"
                                                                >
                                                                    <!-- {{ option.rest_mony }} -->
                                                                    {{ Number(option.money - option.freeze_money - option.used_money).toFixed(2) }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                                <div
                                                    class="__list_add"
                                                    @click="handleAddData(el,'1')"
                                                    :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                                                >
                                                    <i class="iconfont el-icon-hand-iconjia"/>
                                                    继续添加岗位预算
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </template>
                                <!-- 添加活动类型 -->
                                <div
                                    class="__add_active"
                                    @click="handleAddData(row, '2')"
                                    :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                                >
                                    <i class="iconfont el-icon-hand-iconjia"/>
                                    继续添加活动类型
                                </div>
                            </div>
                        </template>
                        <!-- 添加子计划 -->
                        <div
                            v-if="ruleForm.platform_checked"
                            class="__add_items"
                            @click="handleAddData(ruleForm, '3')"
                            :style="{pointerEvents: TYPE == 'check' ? 'none' : ''}"
                        >
                            <i class="iconfont el-icon-hand-iconjia"/>
                            创建新的子计划
                        </div>
                    </div>
                </el-form>
            </div>
            <!-- 计划状态 -->
            <div class="__status">
                <p class="__status_title">计划状态</p>
                <el-switch
                    v-model="ruleForm.status"
                    active-text="启用"
                    inactive-text="禁用"
                    :disabled="isEdit"
                />
            </div>
        </div>

        <!-- 操作 -->
        <div class="__footer">
            <el-button
                size="small"
                type="default"
                :style="{width: '120px', marginRight: '32px'}"
                @click="showDialog = true"
            >
                取消
            </el-button>
            <el-button
                v-if="TYPE == 'creat' || TYPE == 'edit'"
                size="small"
                type="primary"
                :style="{width: '120px'}"
                @click="savaForm('ruleForm')"
            >
                保存
            </el-button>
            <el-button
                v-if="TYPE == 'check'"
                size="small"
                type="primary"
                :style="{width: '120px'}"
                @click="TYPE = 'edit'"
            >
                编辑
            </el-button>
        </div>

        <!-- 取消弹窗 -->
        <show-dialog
            ref="showDialog"
            :dialog="showDialog"
            :width="360"
            :title="'温馨提示'"
            :content="'离开此页面后，已填写的信息将不会保存，确认离开此页面吗？'"
            @close="showDialog = false"
            @emit="emitFun"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import showDialog from '@/components/common/dialog.vue';
export default {
    mixins: [back],
    components: {
        showDialog
    },
    data () {
        return {
            control_no: '',//编号
            showDialog: false,
            TYPE: '', //check:查看 edit: creat：创建
            ruleForm: {
                title: '',//计划名称
                money: '',//预算总额
                start_time: '',//主任务平台补贴预算计划开始时间
                end_time: '',//主任务平台补贴预算计划结束时间
                platform_checked: false,//是否创建子计划
                // freeze_money: '',
                // used_money: '',
                sub: [
                    {
                        sub_no: '',
                        title: '',//子计划名称
                        start_time: '',//子任务平台补贴预算计划开始时间
                        end_time: '',//子任务平台补贴预算计划结束时间
                        money: '',//子计划金额
                        // freeze_money: 0,//已被占用预算金额
                        // used_money: 0,//实际消耗金额
                        sub_detail: [
                            {
                                detail_no: '',
                                type: 1,//活动类型
                                money: '',//预算金额
                                // freeze_money: 0,//已被占用预算金额
                                // used_money: 0,//实际消耗金额
                                checked: false,
                                sub_detail_position: [
                                    {
                                        id: '',
                                        phaadmin_position_no: '',//预算岗位编号
                                        money: '',//岗位预算金额
                                        // freeze_money: 0,//已被占用预算金额
                                        // used_money: 0,//实际消耗金额
                                        // rest_mony: 0,//剩余预算金额
                                        is_enabled: 1
                                    }
                                ]
                            }
                        ]
                    }
                ],
                status: true//计划状态
            },
            postList: [],//岗位数据
            disabledDate: [],//禁止选择时间范围
            typeList: [],//已选择活动类型
        };
    },
    mounted () {
        this.TYPE = !!this.$route.query.type ? this.$route.query.type : '';
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: '财控管理'},{title: '平台财控计划', path: '/student/platform-control'},{title: this.TYPE == 'check' ? '查看计划' : this.TYPE == 'edit' ? '编辑计划' : this.TYPE == 'creat' ? '创建计划' : ''}]);
        this.authResult = this.$route.meta.authResult;

        if(['edit','check'].includes(this.TYPE)) {
            this.control_no = this.$route.query.no ? this.$route.query.no : '';
            this.getInfo();
        }
        this.getList();
    },
    computed: {
        isEdit () {
            return this.TYPE == 'creat' || this.TYPE == 'edit' ? false : true;
        }
    },
    methods: {
        /**
         * @description 初始化详情数据
         */
        getInfo () {
            this.$post('/student/finance_control_official%5Cget', {
                control_no: this.control_no
            }, resp => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        ...resp.data,
                        start_time: resp.data.start_time * 1000,
                        end_time: resp.data.end_time * 1000,
                        status: resp.data.status ? true : false
                    };

                    this.$set(this.ruleForm, 'platform_checked', !!resp.data.sub.length ? true : false);

                    console.log('get', this.ruleForm);

                    const sub = this.ruleForm.sub;

                    if(!!sub.length) {
                        for(let key=0; key<sub.length;key++) {
                            sub[key]['start_time'] = sub[key]['start_time'] * 1000;
                            sub[key]['end_time'] = sub[key]['end_time'] * 1000;

                            const sub_detail = !!sub[key]['sub_detail'] ? sub[key]['sub_detail'] : [];

                            if(!!sub_detail.length) {
                                for(let j=0; j<sub_detail.length;j++) {
                                    this.$set(sub_detail[j], 'checked', !!sub_detail[j]['sub_detail_position'] && !!sub_detail[j]['sub_detail_position'].length ? true : false);
                                }
                            }
                        }
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 获取岗位预算
         */
        getList () {
            this.$post('/student/finance_control_phaadmin_position%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.postList = resp.data;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 添加数据
         * @param   {String}    type    //1:添加岗位预算 2:添加活动类型  3:创建新的子计划
         */
        handleAddData (row, type) {
            switch (type) {
                case '1':
                    const sub_detail_position = JSON.parse(JSON.stringify(row.sub_detail_position));

                    this.$set(row, 'sub_detail_position', sub_detail_position.concat([{
                        id: '',
                        phaadmin_position_no: '',
                        money: '',
                        is_enabled: 1
                    }]));
                    break;
                case '2':
                    const typeList = JSON.parse(JSON.stringify(row.sub_detail));

                    this.$set(row, 'sub_detail', typeList.concat([{
                        detail_no: '',
                        type: '',
                        money: '',
                        // freeze_money: 0,
                        // used_money: 0,
                        checked: false,
                        sub_detail_position: [
                            {
                                id: '',
                                phaadmin_position_no: '',
                                money: '',
                                // freeze_money: 0,
                                // used_money: 0,
                                // rest_mony: 0,
                                is_enabled: 1
                            }
                        ]
                    }]));
                    break;
                case '3':
                    const platformList = JSON.parse(JSON.stringify(row.sub));

                    this.$set(row, 'sub', platformList.concat([{
                        sub_no: '',
                        title: '',
                        start_time: '',
                        end_time: '',
                        money: '',
                        // freeze_money: 0,
                        // used_money: 0,
                        sub_detail: [
                            {
                                detail_no: '',
                                type: '',
                                money: '',
                                // freeze_money: 0,
                                // used_money: 0,
                                checked: false,
                                sub_detail_position: [
                                    {
                                        id: '',
                                        phaadmin_position_no: '',
                                        money: '',
                                        // freeze_money: 0,
                                        // used_money: 0,
                                        // rest_mony: 0,
                                        is_enabled: 1
                                    }
                                ]
                            }
                        ]
                    }]));
                    break;
                default:
                    break;
            }
        },

        /**
         * @description 删除预算岗位
         */
        handleDelete (row,index) {
            const sub_detail_position = JSON.parse(JSON.stringify(row.sub_detail_position));

            sub_detail_position.splice(index,1);

            this.$set(row, 'sub_detail_position', sub_detail_position);
        },

        /**
         * @description 删除活动类型
         */
        handleDeleteActive (row,index) {
            const sub_detail = JSON.parse(JSON.stringify(row.sub_detail));

            console.log('---used_money---', row.used_money);

            if(Number(row.used_money) > 0) {
                this.$notify({
                    title: '提示',
                    message: '当前状态不支持删除',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            sub_detail.splice(index,1);

            this.$set(row, 'sub_detail', sub_detail);
        },

        /**
         * @description 删除子计划
         */
        handleDeletePlan (row,index) {
            const sub = JSON.parse(JSON.stringify(row.sub));

            sub.splice(index,1);

            this.$set(row, 'sub', sub);
        },

        /**
         * @description 自定义表单验证
         */
        formRuleVald () {
            let status = true;
            let platform = true;

            return new Promise((resolve,reject) => {
                const checkVald = value => {
                    if(!value || value === '') {
                        return false;
                    }
                    return true;
                };

                const isNext = !checkVald(this.ruleForm.title) || !checkVald(this.ruleForm.money) || !checkVald(this.ruleForm.start_time) || !checkVald(this.ruleForm.end_time) ? false : true;

                const sub = this.ruleForm.platform_checked ? this.ruleForm.sub : [];

                if(!!sub.length) {
                    for(let key=0; key<sub.length; key++){
                        if(!checkVald(sub[key]['title']) || !checkVald(sub[key]['start_time']) || !checkVald(sub[key]['end_time'])|| !checkVald(sub[key]['money'])) {
                            platform = false;
                        } else {
                            let sub_detail = sub[key]['sub_detail'];

                            if(!!sub_detail.length) {
                                for(let j=0;j<sub_detail.length;j++){
                                    if(!checkVald(sub_detail[j]['money'])) {
                                        platform = false;
                                    }
                                    if(!checkVald(sub_detail[j]['type'])) {
                                        platform = false;
                                    }

                                    if(!!sub_detail[j]['checked'] && !!sub_detail[j]['sub_detail_position'].length && checkVald(sub_detail[j]['money']) && [3,4,5,6].includes(sub_detail[j]['type'])) {
                                        const sub_detail_position = sub_detail[j]['sub_detail_position'];

                                        for(let m=0; m<sub_detail_position.length; m++) {
                                            if(!checkVald(sub_detail_position[m]['phaadmin_position_no']) || !checkVald(sub_detail_position[m]['money'])) {
                                                platform = false;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                resolve(status && platform);
            });
        },

        /**
         * @description 查询时间是否交叉
         */
        checkDate (callback) {
            let type = 1; //1 通过 2:不在主任务时间内
            const start_time = new Date(this.ruleForm.start_time).getTime();
            const end_time = new Date(this.ruleForm.end_time).getTime();
            const sub = this.ruleForm.sub.reduce((cur,next) => {
                cur.push({
                    start_time: new Date(next.start_time).getTime(),
                    end_time: new Date(next.end_time).getTime()
                });
                return cur;
            }, []);

            for(let i=0; i<sub.length; i++) {
                if(sub[i]['start_time'] > end_time || sub[i]['start_time'] < start_time || sub[i]['end_time'] < start_time || sub[i]['end_time'] > end_time) {
                    type = 2;
                }
            }

            console.log('type', type);

            callback(type);
        },

        /**
         * @description 处理相同活动类型下岗位不同
         */
        getSelectNo (postions, postion, option) {
            let a = 0;
            const nos = postions.reduce((cur,next) => {
                if(next.phaadmin_position_no) {
                    cur.push(next.phaadmin_position_no);
                }
                return cur;
            }, []);

            if(nos.length <= 1) return false;

            console.log('--', nos, postion);

            for(let key=0; key<nos.length;key++) {
                if(nos[key] == postion) {
                    a++;
                }
            }

            if(a > 1) {
                this.$set(option, 'phaadmin_position_no', '');
                this.$notify({
                    title: '提示',
                    message: '同个活动类型岗位不可以相同',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
        },

        /**
         * @description 处理时间交叉函数
         */
        checkTimeFun () {

        },

        /**
         * @description 处理时间交叉
         *    相同活动类型计划不可以交叉 不同活动类型时间可以交叉
         */
        handleChangeTime (row, type = '') {
            console.log('---row---', row);

            // 开始处理活动类型交叉
            const types = data => { //查询当前子计划所有的活动类型
                const sub_detail = data.sub_detail;

                let types = sub_detail.reduce((cur,next) => {
                    cur.push(next.type);
                    return cur;
                }, []);

                return types;
            };
            const sub_no = row.sub_no;//当前子计划id
            const sub_types = types(row);//当前子计划所有类型
            const rest_detail = this.ruleForm.sub.filter(item => item.sub_no !== sub_no);//查询其它子计划
            const samePart = (arr1, arr2) => arr1.filter(item => arr2.includes(item)).length > 0 ? true : false;//查询交集
            // 当前计划时间
            const start_time = row.start_time,
                end_time = row.end_time;

            // 查询交叉计划时间是否重合
            for(let i=0; i<rest_detail.length;i++){
                const types_no = types({ sub_detail: rest_detail[i]['sub_detail'] });

                console.log(sub_types, types_no, '123');
                if(samePart(sub_types,types_no)) {
                    console.log(rest_detail[i], 'aaa');
                    // 获取重合类型计划时间
                    const coincidence_start_time = rest_detail[i]['start_time'],
                        coincidence_end_time = rest_detail[i]['end_time'];

                    if((start_time > coincidence_start_time && start_time < coincidence_end_time) || (end_time > coincidence_start_time && end_time < coincidence_end_time)) {
                        this.$notify({
                            title: '提示',
                            message: '子计划相同活动类型时间不可以交叉',
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                }
            }

            console.log('types', sub_types, rest_detail);

            // const select_time = new Date(row[type]).getTime();
            // const sub = JSON.parse(JSON.stringify(this.ruleForm.sub));


            // if(sub.length < 2) return false;

            // const dataList = sub.reduce((cur,next) => {
            //     const start_time = next.start_time ? new Date(next.start_time).getTime() : '';
            //     const end_time = next.end_time ? new Date(next.end_time).getTime() : '';

            //     if(!!start_time && !!end_time) {
            //         if(type == 'start_time' && select_time !== start_time) {
            //             cur.push({
            //                 start_time: start_time,
            //                 end_time: end_time
            //             });
            //         }
            //         if(type == 'end_time' && select_time !== end_time) {
            //             cur.push({
            //                 start_time: start_time,
            //                 end_time: end_time
            //             });
            //         }
            //     }

            //     return cur;
            // },[]);

            // for(let i=0; i<dataList.length; i++) {
            //     if(select_time > dataList[i]['start_time'] && select_time < dataList[i]['end_time']) {
            //         this.$set(row, type, '');
            //         this.$notify({
            //             title: '提示',
            //             message: '不可以和其它计划时间交叉',
            //             type: 'warning',
            //             duration: 2000
            //         });
            //         break;
            //     }
            // }
        },

        /**
         * @description 活动类型处理
         *      type:活动类型
         *      el:数据对象
         *      sub_detail：子数据
         */
        handleCheckType (type, el, sub_detail) {
            const sub = this.ruleForm.sub;
            let typeList = [];

            if(!!sub_detail.length) {
                for(let j=0; j<sub_detail.length; j++) {
                    typeList.push(sub_detail[j]['type']);
                }
            }

            typeList.splice(typeList.indexOf(type), 1);

            if(!!typeList.length) {
                if(typeList.includes(type)) {
                    this.$set(el, 'type', '');
                    this.$notify({
                        title: '提示',
                        message: '同一个子计划的活动类型不可以相同',
                        type: 'warning',
                        duration: 2000
                    });
                }
            }
        },

        /**
         * @description 保存 / 编辑
         */
        savaForm (formName) {
            this.formRuleVald().then(next => {
                if(next) {
                    console.log('next');

                    this.checkDate(type => {
                        if(type === 1) {
                            console.log('ruleForm', this.ruleForm);

                            // 数据处理开始
                            let sub_json = [];
                            let sub = this.ruleForm.sub;

                            if(this.ruleForm.platform_checked) {
                                for(let i=0; i<sub.length;i++){
                                    sub_json.push({
                                        sub_no: !!sub[i]['sub_no'] ? sub[i]['sub_no'] : '',
                                        title: sub[i]['title'],
                                        start_time: sub[i]['start_time'] ? (parseInt(new Date(sub[i]['start_time']).getTime() / 1000)) : '',
                                        end_time: sub[i]['end_time'] ? (parseInt(new Date(sub[i]['end_time']).getTime() / 1000)) : '',
                                        money: sub[i]['money'],
                                        // freeze_money: sub[i]['freeze_money'],
                                        // used_money: sub[i]['used_money'],
                                        sub_detail: []
                                    });

                                    let sub_detail = sub[i]['sub_detail'];

                                    if(!!sub_detail.length) {
                                        for(let j=0;j<sub_detail.length;j++){
                                            sub_json[i]['sub_detail'].push({
                                                detail_no: !!sub_detail[j]['detail_no'] ? sub_detail[j]['detail_no'] : '',
                                                type: sub_detail[j]['type'],
                                                money: sub_detail[j]['money'],
                                                sub_detail_position: []
                                            });

                                            let sub_detail_position = sub[i]['sub_detail'][j]['sub_detail_position'];

                                            if(!!sub_detail_position.length && sub_detail[j]['checked']) {
                                                for(let k=0;k<sub_detail_position.length;k++){
                                                    sub_json[i]['sub_detail'][j]['sub_detail_position'].push({
                                                        id: !!sub_detail_position[k]['id'] ? sub_detail_position[k]['id'] : '',
                                                        phaadmin_position_no: sub_detail_position[k]['phaadmin_position_no'],
                                                        money: sub_detail_position[k]['money'],
                                                        // freeze_money: sub_detail_position[k]['freeze_money'],
                                                        // used_money: sub_detail_position[k]['used_money'],
                                                        is_enabled: sub_detail_position[k]['is_enabled']
                                                    });
                                                }
                                            }
                                        }
                                    }
                                }

                                console.log('sub_json', sub_json);

                                let data = {
                                    control_no: this.TYPE == 'creat' ? '' : this.control_no,
                                    title: this.ruleForm.title,
                                    start_time: parseInt(new Date(this.ruleForm.start_time).getTime() / 1000),
                                    end_time: parseInt(new Date(this.ruleForm.end_time).getTime() / 1000),
                                    status: this.ruleForm.status ? 1 : 0,
                                    money: this.ruleForm.money,
                                    sub_json: JSON.stringify(sub_json)
                                };

                                // 数据处理结束;

                                this.$post('/student/finance_control_official%5Csave', {
                                    ...data
                                }, resp => {
                                    if (resp.code == 1) {
                                        this.$notify({
                                            title: '提示',
                                            message: '保存成功',
                                            type: 'success',
                                            duration: 2000
                                        });

                                        setTimeout(() => {
                                            this.$router.push({
                                                name: 'platformControl'
                                            });
                                        }, 500);
                                    } else {
                                        this.$notify({
                                            title: '提示',
                                            message: resp.msg,
                                            type: 'warning',
                                            duration: 2000
                                        });
                                    }
                                });
                            }
                        } else if (type == 2) {
                            this.$notify({
                                title: '温馨提示',
                                message: '子计划时间必须在主计划时间范围内',
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });

                } else {
                    this.$notify({
                        title: '温馨提示',
                        message: '请完善表单必填项',
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 确认取消
         */
        emitFun () {
            this.$router.push({
                name: 'platformControl'
            });
        },

        /**
         * @description 取消
         */
        // handleCancel () {
        // this.$confirm('取消后将不会保存您所修改的内容，是否取消?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        // }).then(() => {
        //     this.$router.push({
        //         name: 'platformControl'
        //     });
        // });
        // },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    // width: 100%;
    // height: 100%;
    overflow: hidden;
    margin: 10px;
    box-sizing: border-box;
    // border: 1px red solid;
    margin-bottom: 15px;
    .__nav {
        width: 100%;
        min-height: 67px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 35px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        margin-bottom: 24px;
        justify-content: space-between;
        .__nav_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
        .__nav_back {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            margin-right: 32px;
            cursor: pointer;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .__wrap {
        width: calc(100% - 64px);
        margin-left: 32px;
        margin-bottom: 12px;
        // flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-bottom: 32px;
        border: 1px rgba(238, 238, 238, 1) solid;
        overflow-y: auto;
        background: rgba(251, 251, 251, 1);
        padding-top: 8px;
        padding-bottom: 24px;
        &::-webkit-scrollbar {
            width: 3px;
        }
        .__box {
            width: calc(100% - 64px);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            margin-left: 32px;
            .__title {
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                height: 64px;
                font-weight: 500;
                line-height: 64px;
                border-bottom: 1px rgba(233, 233, 233, 1) solid;
            }
            .el_form {
                width: 100%;
                box-sizing: border-box;
                margin-top: 24px;
                .el_row {
                    display: flex;
                    align-items: center;
                    .el_input {
                        display: flex;
                        align-items: center;
                        .el_text {
                            color: rgba(153, 153, 153, 1);
                            font-size: 14px;
                            position: relative;
                            left: -30px;
                            z-index: 10;
                        }
                    }
                    .__flex_main {
                        display: flex;
                        align-items: center;
                        margin-left: 16px;
                        .__flex_wrap {
                            display: flex;
                            align-items: center;
                            margin-right: 24px;
                            .__flex_name {
                                color: rgba(51, 51, 51, 1);
                                font-size: 14px;
                                font-weight: 500;
                                margin-right: 4px;
                            }
                            .__flex_money {
                                color: rgba(247, 144, 56, 1);
                                font-size: 14px;
                                font-weight: 500;
                            }
                        }
                    }
                }
                .__children_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 16px;
                    height: 60px;
                    font-weight: 500;
                    line-height: 60px;
                    border-bottom: 1px rgba(233, 233, 233, 1) solid;
                }
                .__children_select {
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-top: 24px;
                    .__items {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        margin-top: 24px;
                        background: rgba(247, 247, 247, 1);
                        border-radius: 4px;
                        .__items_title {
                            width: 100%;
                            height: 44px;
                            background: rgba(211, 224, 241, 1);
                            display: flex;
                            align-items: center;
                            box-sizing: border-box;
                            padding: 0 24px;
                            border-radius: 4px;
                            justify-content: space-between;
                            margin-bottom: 24px;
                            .__items_title_l {
                                color: rgba(51, 51, 51, 1);
                                font-size: 16px;
                                font-weight: 500;
                            }
                            .__items_title_r {
                                color: rgba(32, 160, 255, 1);
                                font-size: 16px;
                                cursor: pointer;
                            }
                        }
                        .__items_wrap {
                            display: flex;
                            flex-direction: column;
                            width: calc(100% - 64px);
                            margin-left: 32px;
                            .__items_wrap_title {
                                color: rgba(51, 51, 51, 1);
                                font-size: 14px;
                                margin-bottom: 12px;
                            }
                        }
                        .__active {
                            display: flex;
                            flex-direction: column;
                            // border: 1px red solid;
                            margin-left: 32px;
                            margin-right: 32px;
                            margin-bottom: 24px;
                            .__active_header {
                                width: 100%;
                                height: 44px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                box-sizing: border-box;
                                padding: 0 24px;
                                background: rgba(240, 240, 240, 1);
                                .__active_index {
                                    color: rgba(51, 51, 51, 1);
                                    font-size: 14px;
                                    font-weight: 500;
                                }
                                .__active_delete {
                                    color: rgba(32, 160, 255, 1);
                                    font-size: 16px;
                                    cursor: pointer;
                                }
                            }
                            .__active_box {
                                margin: 24px 32px;
                                margin-bottom: 0px;
                                .__active_name {
                                    color: rgba(51, 51, 51, 1);
                                    font-size: 14px;
                                    margin-bottom: 12px;
                                }
                                .__active_radius {
                                    display: flex;
                                    align-items: center;
                                    height: 36px;
                                    margin-bottom: 24px;
                                }
                                .__flex {
                                    display: flex;
                                    align-items: center;
                                    .__flex_wrap {
                                        display: flex;
                                        align-items: center;
                                        margin-right: 24px;
                                        .__flex_name {
                                            color: rgba(51, 51, 51, 1);
                                            font-size: 14px;
                                            font-weight: 500;
                                            margin-right: 4px;
                                        }
                                        .__flex_money {
                                            color: rgba(247, 144, 56, 1);
                                            font-size: 14px;
                                            font-weight: 500;
                                        }
                                    }
                                }
                                .el_input {
                                    display: flex;
                                    align-items: center;
                                    .el_text {
                                        color: rgba(153, 153, 153, 1);
                                        font-size: 14px;
                                        position: relative;
                                        left: -30px;
                                        z-index: 10;
                                    }
                                }
                                .__list {
                                    box-sizing: border-box;
                                    // border: 1px red solid;
                                    margin: 0 24px;
                                    display: flex;
                                    flex-direction: column;
                                    position: relative;
                                    .__list_tips {
                                        color: rgba(249, 91, 86, 1);
                                        font-size: 14px;
                                        position: absolute;
                                        left: 45px;
                                        top: 1px;
                                        z-index: 10;
                                    }
                                    .__list_side {
                                        display: flex;
                                    }
                                    .__delete_list {
                                        color: rgba(32, 160, 255, 1);
                                        font-size: 14px;
                                        cursor: pointer;
                                        margin-top: 36px;
                                        font-weight: 500;
                                        white-space: nowrap;
                                    }
                                    .__next {
                                        display: flex;
                                        align-items: center;
                                        margin-left: 10px;
                                        margin-bottom: 24px;
                                        margin-top: -10px;
                                        .__next_items {
                                            display: flex;
                                            align-items: center;
                                            margin-right: 24px;
                                            .__next_name {
                                                color: rgba(51, 51, 51, 1);
                                                font-size: 14px;
                                                font-weight: 500;
                                            }
                                            .__next_money {
                                                color: rgba(247, 144, 56, 1);
                                                font-size: 14px;
                                            }
                                        }
                                    }
                                }
                                .__list_add {
                                    display: flex;
                                    align-items: center;
                                    color: rgba(32, 160, 255, 1);
                                    font-size: 14px;
                                    font-weight: 500;
                                    box-sizing: border-box;
                                    padding-left: 32px;
                                    cursor: pointer;
                                    .el-icon-hand-iconjia {
                                        color: rgba(32, 160, 255, 1);
                                        font-size: 14px;
                                        font-weight: 500;
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                        .__add_active {
                            height: 34px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border: 1px rgba(153, 153, 153, 1) dashed;
                            border-radius: 4px;
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            font-weight: 500;
                            margin: 0 32px;
                            cursor: pointer;
                            margin-bottom: 32px;
                            .el-icon-hand-iconjia {
                                color: rgba(51, 51, 51, 1);
                                font-size: 14px;
                                font-weight: 500;
                                margin-right: 10px;
                            }
                        }
                    }
                    .__add_items {
                        height: 34px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px rgba(32, 160, 255, 1) dashed;
                        border-radius: 4px;
                        color: rgba(32, 160, 255, 1);
                        font-size: 14px;
                        font-weight: 500;
                        cursor: pointer;
                        margin-bottom: 32px;
                        margin-top: 32px;
                        .el-icon-hand-iconjia {
                            color: rgba(32, 160, 255, 1);
                            font-size: 14px;
                            font-weight: 500;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
    .__status {
        width: 100%;
        height: 68px;
        display: flex;
        align-items: center;
        border-top: 1px rgba(233, 233, 233, 1) solid;
        padding-top: 24px;
        .__status_title {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            margin-left: 32px;
            margin-right: 16px;
        }
    }
    .__footer {
        width: calc(100% - 64px);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 64px;
        margin-bottom: 52px;
    }
}
</style>
<style lang="less">
    .platformControl{
        .el-form-item__label {
            line-height: 16px;
            color: rgba(51, 51, 51, 1);
            position: relative;
            &::before {
                content: '*';
                position: absolute;
                left: 0;
                top: 0;
                color: rgba(249, 91, 86, 1);
                font-size: 14px;
                z-index: 100;
            }
        }
        .require {
            position: relative;
            &::before {
                content: '*';
                position: absolute;
                left: -8px;
                top: 0;
                color: rgba(249, 91, 86, 1);
                font-size: 14px;
                z-index: 100;
            }
        }
        .el-input__inner {
            color: rgba(51, 51, 51, 1);
            &::placeholder {
                color: rgba(153, 153, 153, 1);
            }
        }
        .el-input.is-disabled .el-input__inner {
            color: rgba(51, 51, 51, 1);
        }
        .el-checkbox__input.is-disabled+span.el-checkbox__label {
            color: rgba(51, 51, 51, 1);
        }
        .el-radio__input.is-disabled+span.el-radio__label {
            color: #333;
        }
        .__active_radius .is-checked .el-radio__inner {
            border-color: #409EFF !important;
            background: #409EFF !important;
        }
        .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
            background-color: #fff;
        }
    }
</style>